<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon user-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-content">
              <h3>{{ statistics.userCount || 0 }}</h3>
              <p>用户总数</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon activity-icon">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-content">
              <h3>{{ statistics.activityCount || 0 }}</h3>
              <p>活动总数</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon vote-icon">
              <el-icon><Select /></el-icon>
            </div>
            <div class="stat-content">
              <h3>{{ statistics.voteCount || 0 }}</h3>
              <p>投票总数</p>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-item">
            <div class="stat-icon order-icon">
              <el-icon><ShoppingCart /></el-icon>
            </div>
            <div class="stat-content">
              <h3>{{ statistics.orderCount || 0 }}</h3>
              <p>订单总数</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card title="用户增长趋势" class="chart-card">
          <div class="chart-container" ref="userChartRef"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card title="活动参与统计" class="chart-card">
          <div class="chart-container" ref="activityChartRef"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近活动 -->
    <el-row :gutter="20" class="recent-row">
      <el-col :span="24">
        <el-card title="最近活动" class="recent-card">
          <el-table :data="recentActivities" v-loading="loading">
            <el-table-column prop="title" label="活动名称" />
            <el-table-column prop="participantCount" label="参与人数" width="120" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Calendar, Select, ShoppingCart } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import CloudBaseAPI from '@/api/cloudbase'

const statistics = ref({
  userCount: 0,
  activityCount: 0,
  voteCount: 0,
  orderCount: 0
})

const recentActivities = ref([])
const loading = ref(false)

const userChartRef = ref()
const activityChartRef = ref()

// 获取统计数据
const getStatistics = async () => {
  try {
    const result = await CloudBaseAPI.getStatistics()
    if (result.success) {
      statistics.value = result.data
    }
  } catch (error) {
    ElMessage.error('获取统计数据失败')
  }
}

// 获取最近活动
const getRecentActivities = async () => {
  loading.value = true
  try {
    const result = await CloudBaseAPI.getActivityList(1, 5)
    if (result.success) {
      recentActivities.value = result.data
    }
  } catch (error) {
    ElMessage.error('获取最近活动失败')
  } finally {
    loading.value = false
  }
}

// 初始化用户增长图表
const initUserChart = () => {
  const chart = echarts.init(userChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#409EFF'
      }
    }]
  }
  chart.setOption(option)
}

// 初始化活动统计图表
const initActivityChart = () => {
  const chart = echarts.init(activityChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '60%',
      data: [
        { value: 35, name: '进行中' },
        { value: 25, name: '已结束' },
        { value: 15, name: '未开始' },
        { value: 25, name: '已取消' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  chart.setOption(option)
}

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    'active': 'success',
    'ended': 'info',
    'pending': 'warning',
    'cancelled': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    'active': '进行中',
    'ended': '已结束',
    'pending': '未开始',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知'
}

onMounted(async () => {
  await getStatistics()
  await getRecentActivities()
  
  // 等待DOM渲染完成后初始化图表
  nextTick(() => {
    initUserChart()
    initActivityChart()
  })
})
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.activity-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.vote-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.order-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-content h3 {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 5px 0;
}

.stat-content p {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-container {
  height: 320px;
  width: 100%;
}

.recent-row {
  margin-bottom: 20px;
}

.recent-card {
  min-height: 300px;
}

:deep(.el-card__header) {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  font-weight: 600;
  color: #303133;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>